<template>
  <div id="invoice">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="orderTop" v-show="IsOrderTop">
      <p>
        <span class="gonggao_box">
          <md-icon name="kjfp_wt_icon" slot="left" class="gonggao_icon"></md-icon>
        </span>
        <span class="gonggao_text">只限使用微信、支付宝或充值余额支付的行程开具发票，使用赠送余额支付的行程、抵扣优惠券及高速费不可开具发票。</span>
        <span class="guanbi_box" @click="closeTop">
          <md-icon name="kjfp_guanbi" slot="left" class="guanbi"></md-icon>
        </span>
      </p>
      <div style="clear:both"></div>
    </div>
    <md-scroll-view
      class="invoice_list"
      ref="scrollView"
      :scrolling-x="false"
      :auto-reflow="true"
      @refreshing="onRefresh"
      @endReached="onLoadMore"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <div v-for="(item1,index) in datas" :key="index" class="invoice_list_box">
        <p v-show="item1.OK">{{item1.year}}</p>
        <div v-for="(item2,index1) in item1.items" :key="index1" class="invoice_list_bg">
          <div class="invoice_list_left">
            <h6 class="transaction_check">
              <input
                type="checkbox"
                checked
                class="checkbox app_box"
                v-bind:id="item2.orderNo"
                v-bind:title="item2.orderNo"
                name="app_box"
                @click="getorderNumber(item2.orderNo,item2,item2.invoicePrice)"
              />
              <label class="checkbox check_p" v-bind:for="item2.orderNo"></label>
            </h6>
          </div>
          <label v-bind:for="item2.orderNo">
            <div class="invoice_list_right">
              <p>
                <md-icon name="snkc_xcqx_time" slot="left" class="shangchedian"></md-icon>
                {{item2.createTime}}
                <span class="invoice_orderType">{{item2.orderType}}{{item2.carType}}</span>
              </p>
              <p>
                <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
                {{item2.originLabel}}
              </p>
              <p>
                <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
                {{item2.destLabel}}
                <span class="invoice_money">{{item2.lastAmt}}元</span>
              </p>
            </div>
          </label>
          <div style="clear:both"></div>
        </div>
      </div>
      <md-scroll-view-more slot="more"></md-scroll-view-more>
    </md-scroll-view>
    <div class="no_invoice" v-show="no_invoice">
      <h6>
        <img src="@/assets/imgs/fapiao_kongbai.png" />
      </h6>
      <p>您还没有开发票的行程哦~</p>
    </div>
    <div class="invoice_next" v-show="invoice_sel">
      <div class="invoice_next_left">
        <input type="checkbox" checked class="checkbox" id="allcheck" @click="allcheckbox" />
        <label class="checkbox check_p"></label>
        <span>
          全选
          <em>
            <b>{{checkList.length}}</b>个行程 共
            <b>{{totalMoney}}</b>元
          </em>
        </span>
      </div>
      <div class="invoice_next_right" v-if="showBtn" @click="nextBtn">
        <p>下一步</p>
      </div>
      <div class="invoice_next_right hide_btn" v-else>
        <p>下一步</p>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/svgs/kjfp_wt_icon.svg';
import '@/assets/svgs/kjfp_guanbi.svg';
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import {
  Tabs,
  Icon,
  Field,
  InputItem,
  Toast,
  Radio,
  Dialog,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore
} from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio,
    [InputItem.name]: InputItem,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore
  },
  data() {
    return {
      title: '开具发票',
      datas: [],
      checkList: [],
      showBtn: true,
      totalMoney: '0.00',
      page_no: 1,
      page_size: 20,
      has_next_page: true,
      no_invoice: false,
      invoice_sel: true,
      IsOrderTop: true,
      IsTopbar: true,
      timeHd: ''
    };
  },
  mounted() {
    this.getInvoiceOrderList(this.page_no, true);
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
  },
  methods: {
    // 获取当前用户所有可以开发票的列表
    getInvoiceOrderList(page, isFirst) {
      var param = {
        page_no: page, // 页码
        page_size: this.page_size, // 每页显示多少条
        query_type: 1 // 待开票
      };
      Loading.show();
      http.post('pakj/invoice/getInvoiceOrderList', param).then(res => {
        Loading.hide();
        console.log(res.data);
        this.$refs.scrollView.finishRefresh();
        this.$refs.scrollView.finishLoadMore();
        if (res.data.code === '000000') {
          if (JSON.stringify(res.data.data) === '{}') {
            this.has_next_page = false;
            if (this.datas.length === 0) {
              this.no_invoice = true;
              this.invoice_sel = false;
              this.IsOrderTop = false;
            }
          } else {
            let result = res.data.data;
            for (var i in result) {
              for (var k in result[i]) {
                for (var j in result[i][k].items) {
                  result[i][k].items[j].createTime = moment(
                    result[i][k].items[j].createTime
                  ).format('YYYY-MM-DD HH:mm');
                  result[i][k].items[j].finishTime = moment(
                    result[i][k].items[j].finishTime
                  ).format('YYYY-MM-DD HH:mm');
                }
                this.timeHd = i + result[i][k].name;
                this.datas.push({
                  OK: true,
                  year: i + result[i][k].name,
                  items: result[i][k].items
                });
              }
            }
            this.getArrlength(isFirst);
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 加载更多
    getInvoiceOrderListMore(page, isFirst) {
      var param = {
        page_no: page, // 页码
        page_size: this.page_size, // 每页显示多少条
        query_type: 1 // 待开票
      };
      Loading.show();
      http.post('pakj/invoice/getInvoiceOrderList', param).then(res => {
        Loading.hide();
        this.$refs.scrollView.finishRefresh();
        this.$refs.scrollView.finishLoadMore();
        if (res.data.code === '000000') {
          console.log(res.data);
          if (JSON.stringify(res.data.data) === '{}') {
            this.has_next_page = false;
            if (this.datas.length === 0) {
              this.invoice_sel = false;
              this.IsOrderTop = false;
            }
          } else {
            this.checkList = [];
            this.totalMoney = '0.00';
            var commall = document.querySelector('#allcheck');
            commall.checked = true;
            this.showBtn = true;
            var goodsdelete = document.querySelectorAll('.app_box');
            for (var h = 0; h < goodsdelete.length; h++) {
              goodsdelete[h].checked = true;
            }
            let result = res.data.data;
            for (var i in result) {
              for (var k in result[i]) {
                for (var j in result[i][k].items) {
                  result[i][k].items[j].createTime = moment(
                    result[i][k].items[j].createTime
                  ).format('YYYY-MM-DD HH:mm');
                  result[i][k].items[j].finishTime = moment(
                    result[i][k].items[j].finishTime
                  ).format('YYYY-MM-DD HH:mm');
                }
                if (this.timeHd === i + result[i][k].name) {
                  this.datas.push({
                    OK: false,
                    year: i + result[i][k].name,
                    items: result[i][k].items
                  });
                } else {
                  this.timeHd = i + result[i][k].name;
                  this.datas.push({
                    OK: true,
                    year: i + result[i][k].name,
                    items: result[i][k].items
                  });
                }
              }
            }
            this.getArrlength(isFirst);
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    onRefresh() {
      this.datas = [];
      this.page_no = 1;
      this.checkList = [];
      this.totalMoney = '0.00';
      this.has_next_page = true;
      this.getInvoiceOrderList(this.page_no, true);
      var commall = document.querySelector('#allcheck');
      commall.checked = true;
      this.showBtn = true;
    },
    onLoadMore() {
      if (this.has_next_page) {
        this.page_no += 1;
        this.getInvoiceOrderListMore(this.page_no, true);
      } else {
        this.$refs.scrollView.finishLoadMore();
      }
    },
    closeTop() {
      this.IsOrderTop = false;
    },
    getorderNumber(number, item, money) {
      var commall = document.querySelector('#allcheck');
      var goodsdelete = document.querySelectorAll('.app_box');
      item.state = !item.state;
      if (item.state) {
        this.checkList.push(number);
        this.totalMoney = (this.totalMoney * 100 + money * 100) / 100;
        this.totalMoney = this.returnFloat();
      } else {
        this.removeArr(number);
        this.totalMoney = (this.totalMoney * 100 - money * 100) / 100;
        this.totalMoney = this.returnFloat();
      }
      // console.log(this.checkList);
      for (var i = 0, n = 0; i < goodsdelete.length; i++) {
        if (goodsdelete[i].checked) {
          n++;
        }
        if (n === goodsdelete.length) {
          commall.checked = true;
        } else {
          commall.checked = false;
        }
      }
      if (n) {
        this.showBtn = true;
      } else {
        this.showBtn = false;
      }
    },
    queryIndexOf(number) {
      for (var i = 0; i < this.checkList.length; i++) {
        if (this.checkList[i] === number) {
          return i;
        }
      }
      return -1;
    },
    removeArr(number) {
      var index = this.queryIndexOf(number);
      if (index > -1) {
        this.checkList.splice(index, 1);
      }
    },
    // 全选
    allcheckbox() {
      var commall = document.querySelector('#allcheck');
      var goodsdelete = document.querySelectorAll('.app_box');
      var tg = true;
      for (var i = 0; i < goodsdelete.length; i++) {
        if (commall.checked) {
          this.showBtn = true;
          goodsdelete[i].checked = true;
          if (tg) {
            this.checkList = [];
            this.totalMoney = '0.00';
            this.getArrlength(true);
            tg = false;
          }
        } else {
          goodsdelete[i].checked = false;
          this.checkList = [];
          this.getArrlength(false);
          this.showBtn = false;
          this.totalMoney = '0.00';
        }
      }
    },
    getArrlength(sign) {
      for (var j = 0; j < this.datas.length; j++) {
        for (var k = 0; k < this.datas[j].items.length; k++) {
          if (sign) {
            this.checkList.push(this.datas[j].items[k].orderNo);
            this.datas[j].items[k].state = true;
            this.totalMoney =
              (this.totalMoney * 100 + this.datas[j].items[k].invoicePrice * 100) / 100;
            this.totalMoney = this.returnFloat();
          } else {
            this.datas[j].items[k].state = false;
          }
        }
      }
      // console.log(this.checkList);
    },
    // 下一步
    nextBtn() {
      var p = this.checkList.join(',');
      sessionStorage['orderNoList'] = p;
      this.$router.push({
        name: 'invoice'
      });
      sessionStorage['money'] = this.totalMoney;
      this.getArrlength(false); // 清除选中的状态
    },
    returnFloat() {
      var value = Math.round(parseFloat(this.totalMoney) * 100) / 100;
      var xsd = value.toString().split('.');
      if (xsd.length === 1) {
        value = value.toString() + '.00';
        return value;
      }
      if (xsd.length > 1) {
        if (xsd[1].length < 2) {
          value = value.toString() + '0';
        }
        return value;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#invoice {
  height: 100vh;
  background-color: color-primary-background;
}

.no_invoice {
  position: absolute;
  top: 35%;
  left: 22%;
  z-index: 2;
}

.no_invoice h6 {
  text-align: center;
}

.no_invoice h6 img {
  width: 60%;
}

.no_invoice p {
  text-align: center;
  margin-top: 30px;
  font-size: 28px;
  color: #666;
}

.orderTop {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  box-shadow: 0px 4px 6px 0px rgba(191, 191, 191, 0.5);
  padding-bottom: 20px;
}

.orderTop p {
  margin: 0px 30px;
  font-size: 24px;
  color: #fff;
  padding-top: 20px;
}

.gonggao_box {
  display: inline-block;
  text-align: center;
  float: left;
  margin-right: 18px;
}

.gonggao_icon {
  width: 36px;
  height: 36px;
  padding-top: 28px;
}

.gonggao_text {
  width: 598px;
  display: inline-block;
  float: left;
}

.gonggao_text em {
  color: #FF6917;
  font-style: normal;
}

.guanbi_box {
  display: inline-block;
  text-align: center;
  float: left;
  margin-left: 18px;
}

.guanbi {
  width: 20px;
  height: 20px;
  padding-top: 35px;
}

.shangchedian {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.invoice_list {
  margin-top: 20px;
  height: calc(100vh - 98px - 108px);
  overflow: hidden;
  overflow-y: auto;
}

.invoice_list_box>p {
  height: 80px;
  line-height: 80px;
  padding-left: 30px;
  font-size: 26px;
  color: #666;
  background-color: #eee;
}

.invoice_list_bg {
  background-color: #fff;
  border-bottom: solid 1px #E0E0E0;
  padding: 0px 30px;
}

.invoice_list_left {
  float: left;
  width: 10%;
}

.invoice_list_right {
  float: left;
  width: 90%;
  padding: 30px 0px;
}

.invoice_list_right p {
  margin-top: 10px;
  color: #666;
  font-size: 28px;
}

.invoice_list_right p span {
  float: right;
}

.invoice_orderType {
  border: solid 1px #ccc;
  text-align: center;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 26px;
  color: #999;
}

.invoice_money {
  font-size: 36px;
  color: #333;
}

.transaction_check {
  padding-top: 60px;
}

.transaction_check input[type='checkbox'].checkbox {
  opacity: 0;
  display: inline-block;
  position: relative;
  top: 28px;
  left: 0px;
  z-index: 10;
  cursor: pointer;
}

.transaction_check label.checkbox {
  background: url('../../assets/imgs/check_tip.png') no-repeat;
  width: 36px;
  height: 36px;
  display: inline-block;
  position: relative;
  bottom: 8px;
  background-size: contain;
}

.transaction_check input[type='checkbox'].checkbox:checked+.checkbox {
  background: url('../../assets/imgs/check_tip1.png') no-repeat;
  height: 36px;
  width: 36px;
  background-size: contain;
}

.invoice_next {
  position: fixed;
  bottom: 0px;
  height: 98px;
  border-top: solid 1px #E0E0E0;
  width: 100%;
  z-index: 10;
  background-color: #fff;
}

.invoice_next_left {
  float: left;
  width: 65%;
  margin-top: 20px;
  font-size: 14px;
  color: #333;
}

.invoice_next_left span {
  position: relative;
  font-size: 28px;
  color: #666;
  margin-left: 10px;
}

.invoice_next_left span em {
  font-style: normal;
  margin-left: 5px;
}

.invoice_next_left span b {
  color: #FF6917;
}

.invoice_next_left input[type='checkbox'].checkbox {
  opacity: 0;
  display: inline-block;
  position: relative;
  top: 5px;
  left: 28px;
  z-index: 10;
  cursor: pointer;
}

.invoice_next_left label.checkbox {
  background: url('../../assets/imgs/check_tip.png') no-repeat;
  height: 36px;
  display: inline-block;
  position: relative;
  top: 12px;
  background-size: contain;
  width: 36px;
  right: 7px;
}

.invoice_next_left input[type='checkbox'].checkbox:checked+.checkbox {
  background: url('../../assets/imgs/check_tip1.png') no-repeat;
  height: 36px;
  width: 36px;
  background-size: contain;
}

.invoice_next_right {
  float: left;
  width: 35%;
}

.invoice_next_right p {
  width: 100%;
  height: 98px;
  color: #fff;
  background-color: #FF6917;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
}

.hide_btn p {
  background-color: #f9ad82;
}
</style>
